<template>
  <div>
    <van-nav-bar fixed>
      <template #title>
        <van-tabs type="line" line-width="50" @click="Onchange">
          <van-tab title="综合" name="1"></van-tab>
          <van-tab title="销量" name="2"></van-tab>
        </van-tabs>
      </template>
      <template #left>
        <div class="iconfont" @click="appear">&#xe6b7;筛选</div>
      </template>
      <template #right>
        <div>
          <van-icon name="search" size="18" @click="toSearch" color="#000" />
        </div>
      </template>
    </van-nav-bar>
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '65%' }"
    >
      <van-grid direction="horizontal" :column-num="2" ref="grid">
        <van-grid-item
          :text="item.description"
          v-for="item in tastes"
          :key="item.typeid"
          @click="tasteshow(item.typeid)"
        />
      </van-grid>
      <div style="position:absolute;bottom:0px;width:100%">
        <van-button type="info"  size="large" @click="reset">重置</van-button>
        <van-button type="danger"  size="large" @click="showpop">确定</van-button>
      </div>
      
    </van-popup>
    <!-- 导航栏中的筛选结束 -->
    <div @click="top" class="peaked"></div>
    <van-notice-bar
  left-icon="volume-o"
  text="江南皮革厂倒闭了,小舅子黄鹤带着小姨子跑了,所有蛋糕1折起,先买先得"
/>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        offset="1"
        @load="onLoad"
      >
        <!-- 图片 -->
        <div class="picture"><img src="img/1.jpg" alt="" /></div>
        <van-cell
          v-for="item in commodity"
          :key="item.cid"
          style="width: 50%; display: inline-block"
          @click="toDetail(item.cid,item.cakename)"
        >
          <van-card :thumb="`${item.cake_pic}`">
            <template #footer>
              <div class="tags">
                <div>
                  <p
                    style="font-size: 14px; margin-top: 4px"
                    :class="item.cake_label == null && 'title'"
                  >
                    {{ item.cakename }}
                  </p>
                  <p
                    style="
                      font-size: 12px;
                      color: white;
                      background: #cea461;
                      display: inline-block;
                    "
                  >
                    {{ item.cake_label }}
                  </p>
                  <p
                    style="
                      font-size: 12px;
                      color: #777;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                  >
                    {{ item.cake_description }}
                  </p>
                  <p
                    style="color: #cea461; font-size: 14px; font-weight: bolder"
                  >
                    ￥{{ item.cake_price }}
                  </p>
                </div>
              </div>
            </template>
          </van-card>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 主题结束 -->
    <foot></foot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 0, //页数
      loading: false,
      finished: false,
      refreshing: false,
      error: false,
      loading: false,
      show: false,
      value: null,
      standard: true,
      //点击获取口味
      taste: "",
      //存放的所有的数据
      commodity: [],
      //存放的所有口味
      tastes: [],
      //点击确定的时候来查找知道的口味
      determine: false,
      a: true,
      listype:1,
      typeid:'others',
    };
  },
  //创建结束
  created() {
    //导入所有的口味
    this.$get("/v1/product/taste").then((res) => {
      this.tastes = res.data.data;
    });
  },
  //挂载结束
  // beforeMount () {
  //   this.a=false;
  // },
  methods: {
    // 重置
    reset(){
      this.show=false;
       this.$refs.grid.$children.forEach((item,index)=>{
          item.$el.children[0].style.backgroundColor = "#fff";
          item.$el.children[0].firstChild.style.color = "black";
      })
      this.typeid = 'others'
      this.onRefresh();
    },
    // 获取后台数据
    getData(method,typeid){
       //导入所有的商品数据
      // let url = "/v1/product/list";
      this.$get("/v1/product/list", { page: this.page,method,typeid}).then((res) => {
        if (res.data.data) {
          // console.log(res.data.data);
          this.page++;
          res.data.data.forEach((item) => {
            this.commodity.push(item);
          });
          this.loading = false;
          this.refreshing = false;
          // console.log("触发了加载事件");
        } else {
          this.finished = true;
        }
      });
    },
    //点击销量综合排行 
    Onchange(name){
      this.listype = name
      this.onRefresh();
    },
    // 关闭口味显示框
    showpop(){
      this.show=false;
      // 调取接口筛选口味
      this.onRefresh();
    },
    // 去商品详情页
    toDetail(id,name){
      this.$router.push(`/detail?id=${id}&name=${name}`);
    },
    //前往搜索页面
    toSearch() {
      // if(){}
       let token = localStorage.getItem("token");
       if(token==null){
        this.$dialog({
          message: "还没有登录那赶快去登录一下吧瓦甘达万岁",
        }).then(() => {
          this.$router.push(`/usercenter`);
        });;
      }else{
      this.$router.push("/search");
      }
      
    },
    onLoad() {
      // 加载数据
     this.getData(this.listype,this.typeid);
    },
    onRefresh() {
      this.commodity=[];
      this.page = 0;
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 选择口味
    tasteshow(typeid) {
      // this.$refs.typeid
      // console.log(this.commodity[typeid-1].typeid);
      
        this.typeid = typeid;
      
      this.$refs.grid.$children.forEach((item,index)=>{
        if(typeid-1==index){
          item.$el.children[0].style.backgroundColor = "#ff4001";
          this.$refs.grid.$children[typeid-1].$el.children[0].firstChild.style.color = "white";
        }else{
          item.$el.children[0].style.backgroundColor = "#fff";
          item.$el.children[0].firstChild.style.color = "black";
        }
      })

    },
    taste_search(s) {
      this.taste = s;
    },
    //点击口味的确定
    click_determine() {
      this.determine = true;
      this.show = false;
    },
    appear() {
      this.show = true;
    },
    disappear() {
      this.$refs.sift.style = "display:none;";
    },
    // 慢慢回到顶部的实现
    top() {
      var scrollToTop = setInterval(function () {
        var pos = window.pageYOffset;
        if (pos > 0) {
          window.scrollTo(0, pos - 20);
        } else {
          window.clearInterval(scrollToTop);
        }
      }, 1);
    },
  },
  //监听事件
  watch: {
    determine(newValue, oldValue) {
      if (newValue == true) {
        let typeid = this.taste;
        this.$get(`/v1/product/flavor_rendering?typeid=${typeid}`).then(
          (res) => {
          //console.log(res.data.data);
            this.commodity = res.data.data;
          }
        );
        this.determine = false;
      //console.log("dsfss", newValue);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
//图片开始
.picture {
  overflow: hidden;
  width: 100%;
  // margin: auto;
  height: 15rem;
  margin-top: 3.75rem;
}
.picture img {
  display: block;
  width: 100%;
  height: 100%;
}

// 底部没有商品
.doods .finally {
  width: 90%;
  height: 2rem;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 3rem;
  text-align: center;
  background-color: rgb(255, 225, 169);
}
// 导航栏
.van-nav-bar__right {
  right: 16px;
}

.iconfont {
  -webkit-text-stroke-width: 0;
  font-size: 14px;
}

.van-card {
  padding: 0px;
  .van-card__header {
    display: inline-block;
  }
  .van-card__thumb {
    margin: 0;
  }
  .van-card__content {
    display: none;
  }
  .tags {
    position: relative;
    bottom: 8px;
    // display: flex;
    // flex-direction: row;
    text-align: left;
    p {
      line-height: 16px;
      margin-left: 5px;
    }
  }
}
.van-list {
  background-color: #fff;
  position: relative;
  // bottom: 2rem;
  top: -1rem;
  margin-bottom:2rem;
}
.title {
  position: relative;
  top: 1rem;
}
.van-notice-bar{
  position: relative;
  top:2.8125rem;
}
::v-deep .van-tabs__nav{
  width: 100px;
}
</style>
